<template>
    <div>
        <h3>用户页面{{$route.params.id}}</h3>
        <h3>用户页面{{id}}</h3>
        <button @click='goHome'>跳转到首页</button>
    </div>
</template>

<script>
    export default {
        // 当路由的参数变化时 /user/1 切换到/user/2 原来的组件实例会被复用
        // 因为两个路由渲染了同个组件，复用高效
        created(){
            console.log(this.$route.params.id);
        },
        methods: {
            goHome() {
                this.$router.push('/');
            }
        },
        props:['id'],
        watch:{
            $route:(to)=>{
                console.log(to.params.id);
                //发起ajax 请求后端接口数据，数据趋势视图
            }
        }
        // beforeRouteUpdate(to,next){
        //     console.log(to.params.id);
        //     // 一定要调用next(),不然会阻塞整个路由  放行
        //         next();
        // }
    }
</script>

<style lang="scss" scoped>

</style>